<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>活动公告 - 新时代文明实践智慧服务系统</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", 'Helvetica Neue', 'Microsoft YaHei', Arial, sans-serif;
            background: #f5f5f5;
            overflow-x: hidden;
            padding-top: 44px;
            padding-bottom: 60px;
        }
        
        /* 顶部导航栏 */
        .navbar {
            background: linear-gradient(135deg, #ff6b00 0%, #ffa726 100%);
            color: white;
            height: 44px;
            padding: 0 15px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
        }
        
        .navbar-left {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
        }
        
        .back-btn {
            font-size: 18px;
        }
        
        .navbar-title {
            font-size: 16px;
            font-weight: bold;
        }
        
        .navbar-right {
            font-size: 18px;
            cursor: pointer;
        }
        
        /* 搜索栏 */
        .search-bar {
            background: white;
            margin: 15px;
            border-radius: 20px;
            padding: 10px 15px;
            display: flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
        }
        
        .search-input {
            flex: 1;
            border: none;
            outline: none;
            font-size: 14px;
            background: transparent;
        }
        
        .search-btn {
            color: #ff6b00;
            font-size: 16px;
            cursor: pointer;
        }
        
        /* 分类筛选 */
        .filter-tabs {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 5px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            display: flex;
            gap: 5px;
        }
        
        .filter-tab {
            flex: 1;
            text-align: center;
            padding: 10px;
            border-radius: 12px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
            color: #666;
        }
        
        .filter-tab.active {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            font-weight: bold;
        }
        
        /* 置顶公告 */
        .pinned-section {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .pinned-header {
            padding: 15px 20px;
            border-bottom: 1px solid #f0f2f5;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .pinned-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }
        
        /* 公告列表 */
        .announcement-list {
            margin: 0 15px;
        }
        
        .announcement-card {
            background: white;
            border-radius: 16px;
            margin-bottom: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
            transition: all 0.3s;
            cursor: pointer;
            overflow: hidden;
        }
        
        .announcement-card:hover {
            transform: translateY(-2px);
            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.15);
        }
        
        .announcement-card.pinned {
            border: 2px solid #ff6b00;
            position: relative;
        }
        
        .pinned-badge {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #ff6b00;
            color: white;
            padding: 3px 8px;
            border-radius: 10px;
            font-size: 10px;
            font-weight: bold;
        }
        
        .announcement-header {
            padding: 15px 20px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }
        
        .announcement-meta {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .announcement-type {
            padding: 4px 8px;
            border-radius: 8px;
            font-size: 10px;
            font-weight: bold;
            color: white;
        }
        
        .type-urgent {
            background: #ff4d4f;
        }
        
        .type-important {
            background: #fa8c16;
        }
        
        .type-normal {
            background: #1890ff;
        }
        
        .type-activity {
            background: #52c41a;
        }
        
        .announcement-time {
            font-size: 11px;
            color: #999;
        }
        
        .announcement-content {
            padding: 0 20px 15px;
        }
        
        .announcement-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .announcement-summary {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        .announcement-stats {
            display: flex;
            justify-content: space-between;
            align-items: center;
            background: #f8f9fa;
            padding: 10px 20px;
            font-size: 12px;
            color: #666;
        }
        
        .stats-left {
            display: flex;
            gap: 15px;
        }
        
        .stats-right {
            color: #ff6b00;
            font-weight: bold;
        }
        
        /* 发布公告 */
        .publish-section {
            background: white;
            margin: 0 15px 15px;
            border-radius: 16px;
            padding: 15px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
        }
        
        .publish-title {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            margin-bottom: 15px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .publish-form {
            display: none;
        }
        
        .publish-form.active {
            display: block;
        }
        
        .form-group {
            margin-bottom: 15px;
        }
        
        .form-label {
            font-size: 14px;
            color: #333;
            margin-bottom: 8px;
            display: block;
        }
        
        .form-input {
            width: 100%;
            padding: 10px;
            border: 1px solid #d9d9d9;
            border-radius: 8px;
            font-size: 14px;
            outline: none;
            transition: border-color 0.3s;
        }
        
        .form-input:focus {
            border-color: #ff6b00;
        }
        
        .form-textarea {
            min-height: 80px;
            resize: vertical;
        }
        
        .form-select {
            appearance: none;
            background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
            background-position: right 8px center;
            background-repeat: no-repeat;
            background-size: 16px;
            padding-right: 32px;
        }
        
        .publish-actions {
            display: flex;
            gap: 10px;
        }
        
        .btn {
            padding: 10px 20px;
            border-radius: 16px;
            border: none;
            font-size: 14px;
            cursor: pointer;
            transition: all 0.3s;
            flex: 1;
            text-align: center;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
        }
        
        .btn-secondary {
            background: #f0f2f5;
            color: #666;
        }
        
        .btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        .toggle-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 12px;
            font-size: 12px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        /* 加载更多 */
        .load-more {
            text-align: center;
            padding: 20px;
        }
        
        .load-more-btn {
            background: linear-gradient(135deg, #ff6b00, #ffa726);
            color: white;
            border: none;
            padding: 10px 25px;
            border-radius: 20px;
            font-size: 13px;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .load-more-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background: white;
            display: flex;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .nav-item {
            flex: 1;
            text-align: center;
            padding: 8px 0;
            cursor: pointer;
            transition: all 0.3s;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 2px;
        }
        
        .nav-label {
            font-size: 10px;
            color: #999;
        }
        
        .nav-item.active .nav-icon {
            color: #ff6b00;
        }
        
        .nav-item.active .nav-label {
            color: #ff6b00;
        }
    </style>
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="navbar-left" onclick="goBack()">
            <span class="back-btn">←</span>
            <span class="navbar-title">活动公告</span>
        </div>
        <div class="navbar-right" onclick="togglePublish()">
            ✏️
        </div>
    </div>
    
    <!-- 搜索栏 -->
    <div class="search-bar">
        <span class="search-icon">🔍</span>
        <input type="text" class="search-input" placeholder="搜索公告标题或内容">
        <span class="search-btn">搜索</span>
    </div>
    
    <!-- 分类筛选 -->
    <div class="filter-tabs">
        <div class="filter-tab active" onclick="switchFilter(this, 'all')">全部</div>
        <div class="filter-tab" onclick="switchFilter(this, 'urgent')">紧急</div>
        <div class="filter-tab" onclick="switchFilter(this, 'important')">重要</div>
        <div class="filter-tab" onclick="switchFilter(this, 'activity')">活动</div>
        <div class="filter-tab" onclick="switchFilter(this, 'normal')">通知</div>
    </div>
    
    <!-- 发布公告 -->
    <div class="publish-section" id="publishSection">
        <div class="publish-title">
            📝 发布公告
            <button class="toggle-btn" onclick="togglePublish()">收起</button>
        </div>
        <div class="publish-form" id="publishForm">
            <div class="form-group">
                <label class="form-label">公告类型</label>
                <select class="form-input form-select" name="type">
                    <option value="normal">普通通知</option>
                    <option value="important">重要公告</option>
                    <option value="urgent">紧急通知</option>
                    <option value="activity">活动公告</option>
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">公告标题</label>
                <input type="text" class="form-input" name="title" placeholder="请输入公告标题">
            </div>
            <div class="form-group">
                <label class="form-label">公告内容</label>
                <textarea class="form-input form-textarea" name="content" placeholder="请输入公告详细内容"></textarea>
            </div>
            <div class="publish-actions">
                <button class="btn btn-secondary" onclick="cancelPublish()">取消</button>
                <button class="btn btn-primary" onclick="publishAnnouncement()">发布</button>
            </div>
        </div>
    </div>
    
    <!-- 置顶公告 -->
    <div class="pinned-section">
        <div class="pinned-header">
            <span>📌</span>
            <div class="pinned-title">置顶公告</div>
        </div>
        <div class="announcement-card pinned" onclick="openAnnouncement(1)">
            <div class="pinned-badge">置顶</div>
            <div class="announcement-header">
                <div class="announcement-meta">
                    <span class="announcement-type type-important">重要</span>
                </div>
                <div class="announcement-time">2024-01-20 08:00</div>
            </div>
            <div class="announcement-content">
                <div class="announcement-title">新时代文明实践中心春节期间开放安排</div>
                <div class="announcement-summary">春节期间（1月22日-1月28日），文明实践中心将调整开放时间，各项志愿服务活动正常开展，请各位志愿者注意时间安排...</div>
            </div>
            <div class="announcement-stats">
                <div class="stats-left">
                    <span>👁️ 2,456人查看</span>
                    <span>💬 45条评论</span>
                </div>
                <div class="stats-right">查看详情</div>
            </div>
        </div>
    </div>
    
    <!-- 公告列表 -->
    <div class="announcement-list" id="announcementList">
        <div class="announcement-card" onclick="openAnnouncement(2)">
            <div class="announcement-header">
                <div class="announcement-meta">
                    <span class="announcement-type type-urgent">紧急</span>
                </div>
                <div class="announcement-time">2024-01-20 14:30</div>
            </div>
            <div class="announcement-content">
                <div class="announcement-title">社区环保清洁行动紧急通知</div>
                <div class="announcement-summary">由于天气原因，原定于明天上午9:00的社区环保清洁行动改为后天进行，请已报名的志愿者注意时间调整。具体安排请查看详情...</div>
            </div>
            <div class="announcement-stats">
                <div class="stats-left">
                    <span>👁️ 1,234人查看</span>
                    <span>💬 28条评论</span>
                </div>
                <div class="stats-right">查看详情</div>
            </div>
        </div>
        
        <div class="announcement-card" onclick="openAnnouncement(3)">
            <div class="announcement-header">
                <div class="announcement-meta">
                    <span class="announcement-type type-activity">活动</span>
                </div>
                <div class="announcement-time">2024-01-19 16:20</div>
            </div>
            <div class="announcement-content">
                <div class="announcement-title">"文明交通我先行"宣传活动招募</div>
                <div class="announcement-summary">为提高社区居民的交通安全意识，我们将于本周六在市中心广场举办"文明交通我先行"宣传活动。现招募志愿者30名，欢迎报名参与...</div>
            </div>
            <div class="announcement-stats">
                <div class="stats-left">
                    <span>👁️ 892人查看</span>
                    <span>💬 15条评论</span>
                </div>
                <div class="stats-right">查看详情</div>
            </div>
        </div>
        
        <div class="announcement-card" onclick="openAnnouncement(4)">
            <div class="announcement-header">
                <div class="announcement-meta">
                    <span class="announcement-type type-important">重要</span>
                </div>
                <div class="announcement-time">2024-01-18 10:15</div>
            </div>
            <div class="announcement-content">
                <div class="announcement-title">志愿者培训课程安排通知</div>
                <div class="announcement-summary">为提升志愿服务质量，本月将组织志愿者技能培训。培训内容包括急救知识、沟通技巧、活动组织等。请各位志愿者积极报名参加...</div>
            </div>
            <div class="announcement-stats">
                <div class="stats-left">
                    <span>👁️ 567人查看</span>
                    <span>💬 32条评论</span>
                </div>
                <div class="stats-right">查看详情</div>
            </div>
        </div>
        
        <div class="announcement-card" onclick="openAnnouncement(5)">
            <div class="announcement-header">
                <div class="announcement-meta">
                    <span class="announcement-type type-normal">通知</span>
                </div>
                <div class="announcement-time">2024-01-16 09:30</div>
            </div>
            <div class="announcement-content">
                <div class="announcement-title">积分商城新品上架通知</div>
                <div class="announcement-summary">积分商城新增多款精美礼品，包括图书券、电影票、健身卡等，兑换积分从100-1000不等。快来用您的积分兑换心仪的礼品吧...</div>
            </div>
            <div class="announcement-stats">
                <div class="stats-left">
                    <span>👁️ 1,456人查看</span>
                    <span>💬 67条评论</span>
                </div>
                <div class="stats-right">查看详情</div>
            </div>
        </div>
        
        <div class="announcement-card" onclick="openAnnouncement(6)">
            <div class="announcement-header">
                <div class="announcement-meta">
                    <span class="announcement-type type-activity">活动</span>
                </div>
                <div class="announcement-time">2024-01-14 14:45</div>
            </div>
            <div class="announcement-content">
                <div class="announcement-title">敬老院慰问活动圆满结束</div>
                <div class="announcement-summary">昨日的敬老院慰问活动圆满结束，共有25名志愿者参与，为老人们送去了温暖和关怀。感谢所有参与的志愿者！活动照片已上传...</div>
            </div>
            <div class="announcement-stats">
                <div class="stats-left">
                    <span>👁️ 723人查看</span>
                    <span>💬 18条评论</span>
                </div>
                <div class="stats-right">查看详情</div>
            </div>
        </div>
    </div>
    
    <!-- 加载更多 -->
    <div class="load-more">
        <button class="load-more-btn" onclick="loadMore()">加载更多公告</button>
    </div>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <div class="nav-item" onclick="location.href='index.html'">
            <div class="nav-icon">🏠</div>
            <div class="nav-label">首页</div>
        </div>
        <div class="nav-item" onclick="location.href='venues.html'">
            <div class="nav-icon">📍</div>
            <div class="nav-label">阵地</div>
        </div>
        <div class="nav-item" onclick="location.href='activities.html'">
            <div class="nav-icon">📅</div>
            <div class="nav-label">活动</div>
        </div>
        <div class="nav-item" onclick="location.href='services.html'">
            <div class="nav-icon">🎁</div>
            <div class="nav-label">服务</div>
        </div>
        <div class="nav-item active">
            <div class="nav-icon">📢</div>
            <div class="nav-label">公告</div>
        </div>
    </div>
    
    <script>
        let publishVisible = false;
        
        // 返回上一页
        function goBack() {
            history.back();
        }
        
        // 切换筛选
        function switchFilter(element, type) {
            document.querySelectorAll('.filter-tab').forEach(tab => {
                tab.classList.remove('active');
            });
            element.classList.add('active');
            
            console.log('筛选公告类型:', type);
            // 这里可以根据类型筛选公告
            filterAnnouncements(type);
        }
        
        // 筛选公告
        function filterAnnouncements(type) {
            const cards = document.querySelectorAll('.announcement-card:not(.pinned)');
            cards.forEach(card => {
                if (type === 'all') {
                    card.style.display = 'block';
                } else {
                    const typeElement = card.querySelector('.announcement-type');
                    if (typeElement && typeElement.classList.contains(`type-${type}`)) {
                        card.style.display = 'block';
                    } else {
                        card.style.display = 'none';
                    }
                }
            });
        }
        
        // 切换发布表单
        function togglePublish() {
            const publishSection = document.getElementById('publishSection');
            const publishForm = document.getElementById('publishForm');
            
            publishVisible = !publishVisible;
            
            if (publishVisible) {
                publishForm.classList.add('active');
                publishSection.style.display = 'block';
            } else {
                publishForm.classList.remove('active');
            }
        }
        
        // 取消发布
        function cancelPublish() {
            togglePublish();
            // 清空表单
            document.querySelector('input[name="title"]').value = '';
            document.querySelector('textarea[name="content"]').value = '';
            document.querySelector('select[name="type"]').value = 'normal';
        }
        
        // 发布公告
        function publishAnnouncement() {
            const title = document.querySelector('input[name="title"]').value;
            const content = document.querySelector('textarea[name="content"]').value;
            const type = document.querySelector('select[name="type"]').value;
            
            if (!title.trim() || !content.trim()) {
                alert('请填写完整的公告信息');
                return;
            }
            
            alert(`发布成功！\n\n标题：${title}\n类型：${type}\n内容：${content.substring(0, 50)}...`);
            
            // 重置表单并关闭
            cancelPublish();
        }
        
        // 打开公告详情
        function openAnnouncement(id) {
            alert(`查看公告详情 ID: ${id}\n\n功能开发中...\n将显示：\n• 完整公告内容\n• 发布者信息\n• 评论互动\n• 相关附件`);
        }
        
        // 搜索功能
        document.querySelector('.search-btn').addEventListener('click', function() {
            const keyword = document.querySelector('.search-input').value;
            if (keyword.trim()) {
                alert(`搜索公告关键词: ${keyword}\n功能开发中...`);
            }
        });
        
        // 回车搜索
        document.querySelector('.search-input').addEventListener('keypress', function(e) {
            if (e.key === 'Enter') {
                document.querySelector('.search-btn').click();
            }
        });
        
        // 加载更多
        function loadMore() {
            alert('加载更多公告中...\n将显示更多历史公告');
        }
        
        // 页面加载动画
        document.addEventListener('DOMContentLoaded', function() {
            const cards = document.querySelectorAll('.announcement-card');
            cards.forEach((card, index) => {
                card.style.opacity = '0';
                card.style.transform = 'translateY(20px)';
                setTimeout(() => {
                    card.style.transition = 'all 0.5s ease';
                    card.style.opacity = '1';
                    card.style.transform = 'translateY(0)';
                }, index * 100);
            });
        });
    </script>
</body>
</html>